import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useCallback, useMemo, useState } from "./hook/index";

//! useMemo useCallBack 优化防止数据不变重新渲染问题

function Child({ data, onHandleClick }) {
    console.log("update child");
    return (
        <div>
            <h2>{data.age}</h2>
            <button onClick={onHandleClick}>修改年龄</button>
        </div>
    );
}

// eslint-disable-next-line no-func-assign
Child = React.memo(Child); //? 核心将组件进行缓存进行处理

function App() {
    let [name, setName] = useState("ranmo");
    let [age, setAge] = useState(18);

    //! 进行缓存 age 值只有缓存值发送改变才会导致子组件进行重新渲染
    const data = useMemo(() => ({ age }), [age]); //? 第一个传入值为函数返回对象, 第二个为要缓存的数据
    const addClick = useCallback(() => setAge(age + 1), [age]); //? 第一个传入的值为函数返回函数, 第二参数为要缓存数据

    return (
        <div>
            <h1>{name}</h1>
            <input type="text" onChange={(e) => setName(e.target.value)} />
            <br></br>
            <Child data={data} onHandleClick={addClick}></Child>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
